<template>
  <div class="MV">
    <div class="main">
      <div class="imglist" v-for="(item,index) in mvs" :key="item.id">
        <img :src="item.imgurl" alt="">
        <span style="position:relative;color: #fff;font-size: 8px;left: 215px;top: -25px;" v-for="(item2,index2) in Timemerge" :key="index2" v-show="index==index2">{{item2}}</span>
        <div style="position:relative;display: flex;font-size:6px;left: 190px;top: -170px;color: #fff;align-items: center;">
          <i class="iconfont icon-24gl-play" style="font-size:12px"></i>
          <span v-for="(item1,index1) in Playquantityarr" :key="index1" v-show="index==index1">{{item1}}</span>
        </div>
        <p>{{item.name}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'MV',
  data() {
    return {
      //取出mv的数量,如果没有200的话，就按后台返回的真实数量
      limit: 200,
      Playquantity: [],
      Playquantityarr: [],
      duration: [],
      //分钟
      Minutes: [],
      //秒数
      Seconds: [],
      Timemerge: []
    }
  },
  computed: {
    ...mapState({
      mvs: state => state.Singger.mvs
    })
  },
  mounted() {
    this.$store.dispatch('getGetsingermvlist', { id: this.$route.query.id, limit: this.limit })
  },
  watch: {
    //处理时间跟播放的数量
    mvs: {
      handler(v, o) {
        this.Playquantity = v.map(val => {
          return val.playCount
        })
        this.duration = v.map(val => {
          return val.duration
        })
      }
    },
    Playquantity: {
      handler(v, o) {
        this.Playquantityarr = v.map(val => {
          if (val.toString().length < 6) {
            return val.toString().slice(0, 1) + '万'
          } else if (val.toString().length < 5) {
            return val.toString().slice(0, 0) + '万'
          } else if (val.toString().length < 4) {
            return val.toString().slice(0, 2) + '万'
          } else if (val.toString().length < 7) {
            return val.toString().slice(0, 2) + '万'
          } else if (val.toString().length < 8) {
            return val.toString().slice(0, 3) + '万'
          }
        })
      }
    },
    duration: {
      handler(v, o) {
        this.Minutes = v.map(val => {
          let m = new Date(val)
          let a = m.getMinutes()
          if (a.toString().length <= 1) {
            return '0' + m.getMinutes()
          } else {
            return m.getMinutes()
          }
        })
        this.Seconds = v.map(val => {
          let s = new Date(val)
          let b = s.getSeconds()
          if (b.toString().length <= 1) {
            return '0' + s.getSeconds()
          } else {
            return s.getSeconds().toString()
          }
        })
      }
    },
    Seconds: {
      handler(v, o) {
        for (let i = 0; i < v.length; i++) {
          this.Timemerge.push(this.Minutes[i] + ':' + this.Seconds[i])
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.MV {
  margin-top: 20px;
  .main {
    display: flex;
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    .imglist {
      img {
        width: 250px;
        height: 150px;
        border-radius: 5px;
      }
      img:hover {
        cursor: pointer;
      }
      p {
        font-size: 14px;
        opacity: 0.8;
        width: 240px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-top: -30px;
        margin-bottom: 40px;
      }
      p:hover {
        cursor: pointer;
        opacity: 1;
      }
    }
  }
}
</style>